iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
自我挑戰組

學習 canvas 日記系列 第 23

第 23 天 練習畫遊戲場地 一

  • 分享至 

  • xImage
  •  

練習作遊戲的地圖

  • 寬 * 高 = 200px * 200px
  • 切割出水平 10 格、垂直 10 格
  • 每格大小 20 * 20
  • 場地格子資料的 items 的陣列
    這個資料會是行列 10 * 10 的陣列
  • 建立 map 陣列放 100 格的格子資料
    資料會用先水平再垂直
    由左至右、由上至下的數值

map 陣列轉成的圖是屬於第二圖層
第一層是背景

// 當地圖資料放在 10 * 10 的二維陣列中
var  map =[
   [0, 1, 2, 3, 0, 1, 2, 3, 0, 1],
   [1, 2, 3, 0, 1, 2, 3, 0, 1, 2],
   [2, 3, 0, 1, 2, 3, 0, 1, 2, 3],
   [3, 0, 1, 2, 3, 0, 1, 2, 3, 0],
   [0, 1, 2, 3, 0, 1, 2, 3, 0, 1],
   [1, 2, 3, 0, 1, 2, 3, 0, 1, 2],
   [2, 3, 0, 1, 2, 3, 0, 1, 2, 3],
   [3, 0, 1, 2, 3, 0, 1, 2, 3, 0],
   [0, 1, 2, 3, 0, 1, 2, 3, 0, 1],
   [1, 2, 3, 0, 1, 2, 3, 0, 1, 2]
];

要把 map 的資料轉成地圖時
就需要像下方一樣用 2 個 For 迴圈
分別是 row 水平行先、 col 垂直列後
再判斷取得的值填入顏色、大小

for(var col = 0; col < map[0].length; col++){
  for(var row = 0; row < map.length; row++){
    var set = map[row][col];
    if(set == 1){
      ctx.fillStyle = '#333'
      ctx.fillRect(col * 20, row * 20, 20, 20)
    }
    if(set == 2){
      ctx.fillStyle = '#666'
      ctx.fillRect(col * 20, row * 20, 20, 20)
    }
    if(set == 3){
      ctx.fillStyle = '#999'
      ctx.fillRect(col * 20, row * 20, 20, 20)
    }
  } 
    // 當 x 方向全執行結束再執行第二個的 y 方向
}

https://ithelp.ithome.com.tw/upload/images/20181106/20107496IHluJPQ1ci.jpg

不用填色、改成放入圖片時
fillStyle、 fillRect 刪除改成下方的 drawImage

var img = new Image(); 
img.src = 'img.jpg';

ctx.drawImage(img, 0, 0, 250, 250, col * 20, row * 20, 20, 20);

上一篇
第 22 天 Keydown事件
下一篇
第 24 天 練習畫遊戲場地 二
系列文
學習 canvas 日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言